import { ref, Ref, computed, ComputedRef, inject } from 'vue'
import { StyleBinding } from '@/types'
import { mul, throttle } from '@/lib/util'
import { logger } from '@/instance'
import { Clip } from '@/core/clip'

export type ClipComposition = {
  style: ComputedRef<StyleBinding>
  dragStart: (e: MouseEvent) => void
  resizeStart: (e: MouseEvent, isLeft: boolean) => void
}
export function useClip(source: Clip): ClipComposition {
  logger.log('composables/clip', 'useClip', source)

  const clip = ref<Clip>(source)

  const pxPerSec = inject('pxPerSec') as Ref<number>
  const style = computed<StyleBinding>(() => {
    return {
      width: `${mul(pxPerSec.value, clip.value.duration)}px`,
      left: `${mul(pxPerSec.value, clip.value.offset)}px`,
    }
  })
  const resizeStart = (e: MouseEvent, isLeft: boolean) => {
    const firstX = e.x
    const shadow = {
      offset: clip.value.offset,
      duration: clip.value.duration,
    }
    const onMouseup = (e: MouseEvent) => {
      e.stopPropagation()
      window.removeEventListener('mousemove', onMousemove)
      window.removeEventListener('mouseup', onMouseup)
      logger.log('composables/clip', 'onMouseup', e)
    }
    const onMousemove = throttle(
      17,
      (e: MouseEvent) => {
        const diff = e.x - firstX
        // const direction = diff > 0 ? 'right' : 'left'
        if (Math.abs(diff) > 0.5) {
          // let id = scheduleTimelineMoving(e, onMousemove)
          if (isLeft) {
            // let oldVal = clip.value.offset
            clip.value.offset = shadow.offset + diff / pxPerSec.value
            clip.value.duration = shadow.duration - diff / pxPerSec.value
            // oldVal === clip.value.offset && stopMoveTimeline(id)
          } else {
            // let oldVal = clip.value.duration
            clip.value.duration = shadow.duration + diff / pxPerSec.value
            // oldVal === clip.value.duration && stopMoveTimeline(id)
          }
        }
        logger.log('composables/clip', 'onMousemove', diff, e)
      },
      true
    ) as (e: MouseEvent) => void
    window.addEventListener('mousemove', onMousemove)
    window.addEventListener('mouseup', onMouseup)
    logger.log('composables/clip', 'resizeStart', firstX, shadow, e)
  }
  const dragStart = (e: MouseEvent) => {
    const firstX = e.x
    const shadow = {
      offset: clip.value.offset,
      duration: clip.value.duration,
    }
    const onMouseup = (e: MouseEvent) => {
      e.stopPropagation()
      window.removeEventListener('mousemove', onMousemove)
      window.removeEventListener('mouseup', onMouseup)
      logger.log('composables/clip', 'onMouseup', e)
    }
    const onMousemove = throttle(
      17,
      (e: MouseEvent) => {
        const diff = e.x - firstX
        // const direction = diff > 0 ? 'right' : 'left'
        if (Math.abs(diff) > 0.5) {
          clip.value.offset = shadow.offset + diff / pxPerSec.value
        }
        logger.log('composables/clip', 'onMousemove', diff, e)
      },
      true
    ) as (e: MouseEvent) => void
    window.addEventListener('mousemove', onMousemove)
    window.addEventListener('mouseup', onMouseup)
    logger.log('composables/clip', 'dragStart', firstX, shadow, e)
  }
  return {
    style,
    resizeStart,
    dragStart,
  } as ClipComposition
}
